คู่มือใช้งาน Fetch API JavaScript ฉบับโค้ดตัวอย่าง

คู่มือใช้งาน Fetch API JavaScript ฉบับโค้ดตัวอย่าง

async await เหมาะกับงานดึงข้อมูลและติดต่อบริการเว็บสมัยใหม่

เริ่มต้นใช้งาน

// พื้นฐาน: เรียกข้อมูลและตรวจสอบสถานะ
fetch('https://api.example.com/items')
  .then(res => {
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

ตัวอย่างแบบ async await

async function loadItems() {
  try {
    const res = await fetch('https://api.example.com/items');
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const data = await res.json();
    console.log('รายการ:', data);
  } catch (e) {
    console.error('ข้อผิดพลาด:', e.message);
  }
}
loadItems();

ส่งข้อมูลแบบ POST JSON

async function createItem(payload) {
  const res = await fetch('https://api.example.com/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  if (!res.ok) throw new Error('HTTP ' + res.status);
  return await res.json();
}
createItem({ name: 'Topvery', active: true })
  .then(console.log)
  .catch(console.error);

อัปโหลดฟอร์มและไฟล์ด้วย FormData

กรณีส่งไฟล์หรือข้อมูลฟอร์ม ใช้ FormData

const form = new FormData();
form.append('username', 'chote');
form.append('avatar', fileInput.files[0]); // ไฟล์จาก <input type="file">fetch('https://api.example.com/profile', { method: 'POST', body: form }) .then(r => r.ok ? r.json() : Promise.reject('HTTP ' + r.status)) .then(console.log) .catch(console.error); 

อ่านผลลัพธ์เป็นชนิดต่างๆ ของ Response

Response รองรับหลายเมธอด

const res = await fetch('https://api.example.com/file');
const asText = await res.text();        // ข้อความ
const asJson = await res.json();        // JSON
const asBlob = await res.blob();        // ไฟล์/รูปภาพ
const asBuf  = await res.arrayBuffer(); // ไบนารี

แนบพารามิเตอร์ใน URL

const params = new URLSearchParams({ q: 'topvery', page: 2 });
const res = await fetch('https://api.example.com/search?' + params.toString());

กำหนดส่วนหัวและโหมดการร้องขอ

ตั้งค่า headers credentials และ mode สำหรับงานที่ต้องใช้คุกกี้หรือข้ามโดเมน อ่านเพิ่มที่ ตัวเลือกของ fetch

const res = await fetch('https://api.example.com/me', {
  headers: { 'Authorization': 'Bearer <token>' },
  credentials: 'include', // ส่งคุกกี้ถ้าจำเป็น
  mode: 'cors'
});

ยกเลิกคำขอด้วย AbortController และตั้งเวลา

ใช้ AbortController เพื่อยกเลิกคำขอที่ช้า และทำ timeout

function fetchWithTimeout(url, ms = 5000, options = {}) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), ms);
  return fetch(url, { ...options, signal: controller.signal })
    .finally(() => clearTimeout(id));
}fetchWithTimeout('https://api.example.com/slow', 3000) .then(r => r.ok ? r.text() : Promise.reject('HTTP ' + r.status)) .then(console.log) .catch(e => { if (e.name === 'AbortError') console.log('ยกเลิกคำขอเพราะเกินเวลา'); else console.error(e); }); 

จัดการข้อผิดพลาดอย่างเป็นระบบ

async function safeFetch(url, options) {
  try {
    const res = await fetch(url, options);
    const type = res.headers.get('content-type') || '';
    if (!res.ok) {
      const reason = type.includes('application/json')
        ? JSON.stringify(await res.json())
        : await res.text();
      throw new Error(`HTTP ${res.status}: ${reason}`);
    }
    return type.includes('application/json') ? res.json() : res.text();
  } catch (err) {
    // จุดกลางสำหรับ log หรือแจ้งเตือน
    throw err;
  }
}

แนวทางที่ดี

• เช็ค response.ok และจัดการสถานะผิดพลาดให้ครบ
• ตั้งเวลา timeout ด้วย AbortController
• แยกยูทิลิตี้ fetch ใช้ซ้ำง่าย ทดสอบง่าย
• ระวัง CORS และการส่งคุกกี้ข้ามโดเมน